import { BrowserRouter, Routes, Route } from 'react-router-dom'

// 导入页面组件
import Login from './views/Login/Login';
import Index from './views/Index/Index';
import NotFound from './views/NotFound/NotFound';
import Register from './views/Register/Register';
import UserProfile from './views/UserProfile/UserProfile'; 
import { useNavigate } from 'react-router-dom';
import { setNavigate } from './utils/http';
import RequierAuth from './components/RequireAuth/RequireAuth';
import Modify from "./views/Modify/Modify";
import SurveyPage from './views/SurveyPage/SurveyPage';
import StockPage from './views/StockPage/StockPage';
import SingleStockPage from './views/SingleStockPage/SingleStockPage';
import MultiStockPage from './views/MultiStockPage/MultiStockPage';
import ProductManage from './views/ProductManage/ProductManage/ProductManage';
import TradeHoldings from './views/ProductManage/TradeHoldings/TradeHoldings';
import TradeManual from './views/ProductManage/TradeManual/TradeManual';
import  AI_Factors from './views/Strategy/AI-Factors/AI-Factors';
import  AI_Report from './views/Strategy/AI-Report/AI-Report';

import FundPage from './views/FundPage/FundPage';

import Home from './views/Home/Home';
import AIMidPage from './views/Strategy/AI-MidPage/Ai-MidPage';
import UserMidPage from './views/UserMidPage/UserMidPage';


// NOTE 由于使用了useNavigate，所以必须单独定义一个页面（AppRoutes），你可以理解为固定写法
function AppRoutes() {
  // 为请求拦截器设置navigate
  const navigate = useNavigate();
  setNavigate(navigate);
  // 使用Routes定义多个不同的路由
  return (
    <Routes>

      {/* 使用Route定义某一个路由，如下是定义了当访问/login路径时，路由到Login页面 */}
      <Route path='/login' element={<Login />} />
      <Route path='/register' element={<Register />} />

      {/* 选择在App.js中统一设置路由，这样一来当其他页面想要使用该路由时，只要在相应位置使用<Outlet />代替即可 */}
      <Route path='/' element={<RequierAuth><Index /></RequierAuth>} >
        <Route path="/home" element={<Home/>} />
        <Route path="/strategy" element={<AIMidPage/>}/>
        <Route path="/strategy/ai-factors" element={<AI_Factors/>} />
        <Route path="/strategy/ai-report" element={<AI_Report/>} />
        <Route path="/stock" element={<StockPage />} />
        <Route path="/ui/singlestock" element={<SingleStockPage />} />
        <Route path="/ui/stocklist" element={<MultiStockPage />} />
        <Route path="/ui/fund" element={<FundPage />} />
        <Route path="/trade" element={<ProductManage/>} />
        {/* 这里所写的 <div> something <div> 只是一个占位符，没有真正调用我们的js文件*/}
        <Route path="/profile" element={<UserProfile />} />
        <Route path="profile/edit" element={<Modify />} />
        <Route path="/survey" element={<SurveyPage />} />
        <Route path="/product/tradeholdings" element={<TradeHoldings />} />
        <Route path="/product/trademanual" element={<TradeManual />} />
        <Route path="/user" element={<UserMidPage />} />
      </Route>

      {/* 通常还需要统一设置一个404页面，在react-router-dom中，设置path="*"表示匹配所有未被定义的路由 */}
      <Route path="*" element={<NotFound />} />
    </Routes>
  )
}


// 主程序
function App() {
  return (
    <div>
      <BrowserRouter>
        <AppRoutes />
      </BrowserRouter>
    </div>
  );
}

export default App;
